<template>
	<view :class="['staff']">
		<view class="staff-search" v-if="!isManage">
			<view class="staff-search-box">
				<picker :range="roles" range-key="name" :value="roleIndex" @change="selectRoles" class="picker">
					{{roles[roleIndex].name}}
				</picker>
				<input type="text" confirm-type="search" @confirm="search" @input="input" placeholder="输入用户手机号搜索" placeholder-style="color: #C5C5C5" :value="keyword" />
				<image src="https://master.shengejiaju.cn/web/static/icons/ico_close@2x_white.png" class="close" v-if="keyword" @click="clear"></image>
				<image src="https://master.shengejiaju.cn/web/static/icons/ico_search_people@2x.png"></image>
			</view>
		</view>
		<view class="staff-type">
			<view :class="['staff-search-item',{active: staffType==0}]" @click="changeRole(0)" v-show="!isManage">
				<view>用户</view>
				<text>{{counts.user1}}</text>
			</view>
			<view :class="['staff-search-item',{active: staffType==1}]" @click="changeRole(1)">
				<view>业务员</view>
				<text>{{counts.user2}}</text>
			</view>
			<view :class="['staff-search-item',{active: staffType==2}]" @click="changeRole(2)">
				<view>财务</view>
				<text>{{counts.user3}}</text>
			</view>
			<view :class="['staff-search-item',{active: staffType==3}]" @click="changeRole(3)">
				<view>分销商</view>
				<text>{{counts.user4}}</text>
			</view>
			<view :class="['staff-search-item',{active: staffType==4}]" @click="changeRole(4)">
				<view>代理商</view>
				<text>{{counts.user5?counts.user5:0}}</text>
			</view>
			<view :class="['staff-search-item',{active: staffType==5}]" @click="changeRole(5)">
				<view>设计师</view>
				<text>{{counts.user6?counts.user6:0}}</text>
			</view>
		</view>
		<view class="tips" v-if="staffType > 0 && staffType!=5">
			<block v-if="staffType==1">注：业务员跟设计师同理，是公司内部员工，享提成</block>
			<block v-if="staffType==2">注：财务可登陆商户端，可以拿货价下单，可管理店铺。</block>
			<block v-if="staffType==3">注：分销商不仅可享拿货折扣，推广的客户购买后也可享受提成。分销商还可设置二级代理商，代理商的每笔订单可享受提成。</block>
			<block v-if="staffType==4">注：代理商是分销商所推广的下级，分销商可在每笔订单获取跟代理商之间的提成差。只有分销商可设置代理商</block>
		</view>
		<view class="group" @click="setTag" v-if="staffType == 0">{{tagsName}} <u-icon name="arrow-down" size="24" style="margin-left: 10rpx;"></u-icon></view>
		<block v-if="staffList.length">
			<view class="staff-list" v-if="staffType!=0">
				<view class="staff-item" v-for="(data,index) in staffList" :key="index" @click="selectStaff(data.checked,index)">
					<label>
						<checkbox :value="data.store_id.toString()" :checked="data.checked" color="#FFF"  v-if="isManage"/>
						<image :src="data.user?data.user.heard_img:''"></image>
						<view class="staff-item-info" @click="dynamicInfo(data.user_id,0)">
							<view class="staff-item-name">{{data.user?data.user.nickname:'未绑定微信'}}</view>
							<view class="staff-item-id">ID:{{data.user_id}} <text>提点：{{data.distributor_royalty}}%</text></view>
							<view class="staff-item-tag">
								<text>电话:{{data.phone}}</text>
							</view>
						</view>
						<view>
							<view class="phonecall" @click.stop="phoneCall(data.phone)" v-if="!isManage">联系TA</view>
							<view class="phonecall changeCommission" @click.stop="changeCommission(data)" v-if="!isManage">修改提成</view>
						</view>
					</label>
				</view>
			</view>
			<view class="staff-list" v-else>
				<view class="staff-item" v-for="(data,index) in staffList" :key="index" @click="selectStaff(data.checked,index)">
					<label>
						<checkbox :value="data.store_id.toString()" :checked="data.checked" color="#FFF"  v-if="isManage"/>
						<image :src="data.heard_img?data.heard_img:''"></image>
						<view class="staff-item-info" @click="dynamicInfo(data.user_id,0)">
							<view class="staff-item-name">{{data.nickname}}</view>
							<view class="staff-item-id">ID:{{data.user_id}}</view>
							<view class="staff-item-tag">
								<text>电话:{{data.phone}}</text>
							</view>
						</view>
						<view>
							<view class="phonecall" @click.stop="phoneCall(data.phone)" v-if="!isManage">联系TA</view>
							<view class="set" @click.stop="set(data.user_id)">设置</view>
							<view class="set" @click="dynamicInfo(data.user_id,1)">浏览记录</view>
						</view>
					</label>
				</view>
			</view>
		</block>
		<block v-else>
			<nothing :text="keyword && onSearch?'搜索结果为空,请确认手机号码是否正确':'暂无人员'" :btn="false" style="margin-top: 100rpx;"></nothing>
		</block>
		<view class="all-chose" v-if="isManage">
			<checkbox-group @change="allChose">
				<label><checkbox color="#FFF" :checked="isAll" value="all"/>{{isAll?'取消全选':'全选'}}</label>
			</checkbox-group>
		</view>
		<view class="staff-bottom">
			<view class="add-btn" v-if="(!isManage && staffType < 4) || (!isManage && staffType == 5)"><navigator :url="'/pages/staff/add-staff?type='+staffType">添加人员</navigator></view>
			<view class="manage-btn" v-if="(!isManage && staffList.length && staffType > 0 && staffType < 4) || (!isManage && staffType==5)" @click="manage">管理人员</view>
			<view v-if="isManage" @click="delStaff" class="del">删除</view>
			<view v-if="isManage" @click="complate" class="orange">完成</view>
			<view class="add-btn" v-if="staffType==4" @click="setCommission">设置提成</view>
		</view>
		<uni-popup ref="Commission" type="dialog">
			<uni-popup-dialog mode="input" placeholder="提成需大于或等于0且小于50"
				:value="distributor_royalty"
				@confirm="confirmStoreUpDistributorRoyalty"
				:title="distributor_royalty?'修改分销商提成':'设置分销商提成'">
			</uni-popup-dialog>
		</uni-popup>
		<u-select v-model="showTags" :list="tagList" label-name="group_name" value-name="group_id" @confirm="confirmSelectTag"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				onSearch: false,
				keyword: '',
				isManage: false,
				roleIndex: 0,
				roles: [{
					id: 0,
					name: '普通用户'
				},{
					id: 1,
					name: '业务员'
				},{
					id: 2,
					name: '财务'
				},{
					id: 3,
					name: '分销商'
				}],
				counts: {
					user1: 0,
					user2: 0,
					user3: 0,
					user4: 0,
					user5: 0,
					user6: 0
				},
				page: 0,
				noMore: false,
				staffType: 0,
				staffList: [],
				choseList: [],
				isAll: false,
				distributor_royalty: '',
				tagList: [],
				showTags: false,
				tagsName: '请选择分组'
			};
		},
		onShow() {
			this.staffList = []
			this.init()
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.init(this.page,'')
			}
		},
		methods: {
			async setTag(){
				const { datas } = await this.$api.SelectStoreGroup()
				this.tagList = datas
				this.showTags = true
			},
			async confirmSelectTag(e){
				if(e[0].value){
					this.staffList = []
					this.init(null,null,e[0].value)
					this.tagsName = e[0].label
				}else{
					this.staffList = []
					this.init(null,null,null)
					this.tagsName = '请选择分组'
				}
			},
			init(page,keyword,store_group_id){
				let data = {
					limit: 10,
					page: page?page:0,
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					type: this.staffType + 1,
					keyword: keyword?keyword:'',
					store_group_id: store_group_id?store_group_id:''
				}
				this.$api.StaffCount({store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id}).then(res => {
					this.counts.user1 = res.datas.user1
					this.counts.user2 = res.datas.user2
					this.counts.user3 = res.datas.user3
					this.counts.user4 = res.datas.user4
					this.counts.user5 = res.datas.user5
					this.counts.user6 = res.datas.user6
					if(res.datas.distributor_royalty){
						this.distributor_royalty = res.datas.distributor_royalty
					}
				})
				if(this.staffType==0){
					delete data.type
					data.role_type = 1
					this.$api.UserList(data).then(res => {
						if(res.datas.length){
							res.datas.forEach(item => {
								this.staffList.push(item)
							})
						}else{
							this.noMore = true
						}
					})
					this.staffList.forEach(item => {
						this.$set(item,'checked',false)
					})
					return
				}
				this.$api.StaffLists(data).then(res => {
					if(res.datas.length){
						res.datas.forEach(item => {
							this.staffList.push(item)
						})
					}else{
						this.noMore = true
					}
					this.staffList.forEach(item => {
						this.$set(item,'checked',false)
					})
				})
			},
			// 选择角色
			selectRoles(e){
				this.roleIndex = e.detail.value
			},
			input(e){
				this.keyword = e.detail.value
			},
			// 搜索
			search(e){
				this.staffList = []
				this.keyword = e.detail.value
				this.onSearch = true
				this.init(0,e.detail.value)
			},
			clear(){
				this.keyword = ''
			},
			// 联系
			phoneCall(e){
				uni.makePhoneCall({
					phoneNumber: e
				})
			},
			// 切换角色列表
			changeRole(e){
				this.isAll = false
				this.staffType = e
				this.staffList = []
				this.page = 0
				this.noMore = false
				this.init()
			},
			// 管理人员
			manage(){
				if(this.staffType==0){
					this.staffType = 1
				}
				this.isManage = true
			},
			selectStaff(checked,index){
				if(checked){
					this.staffList[index].checked = false
				}else{
					this.staffList[index].checked = true
				}
			},
			// 删除人员
			delStaff(){
				let counts = 0,
						ids = [],
						_this = this
				this.staffList.forEach(item => {
					if(item.checked){
						counts++
						ids.push(item.store_admin_id)
					}
				})
				if(counts<=0){
					uni.showToast({
						icon: 'none',
						title: '请至少选择一条',
						duration: 1500
					})
					return
				}
				uni.showModal({
					content: '是否确认删除选择的人员?',
					success(res) {
						if(res.confirm){
							_this.$api.StaffDelate({store_admin_id: ids.join(',')}).then(res => {
								uni.showToast({
									icon: "none",
									title: "删除成功",
									duration: 1500
								})
								setTimeout(() => {
									_this.staffList = []
									_this.isAll = false
									if(_this.style_id){
										_this.init(0,_this.style_id)
									}else{
										_this.init(0)
									}
								},1500)
							})
						}
					}
				})
			},
			// 完成
			complate(){
				this.isManage = false
			},
			// 全选
			allChose(e){
				if(e.detail.value.length){
					this.isAll = true
					this.staffList.forEach(item => {
						this.$set(item,'checked',true)
					})
				}else{
					this.isAll = false
					this.staffList.forEach(item => {
						this.$set(item,'checked',false)
					})
				}
			},
			// 跳转用户详情
			dynamicInfo(user_id,type){
				uni.navigateTo({
					url: '/pages/index/user-dynamic-info?user_id='+user_id+"&type="+type
				})
			},
			setCommission(){
				this.$refs.Commission.open()
			},
			confirmStoreUpDistributorRoyalty(done,value){
				if(value < 0 || value > 50){
					uni.showToast({
						icon: 'none',
						title: '提成需大于或等于0且小于50'
					})
					return
				}
				this.$api.StoreUpDistributorRoyalty({distributor_royalty: value,store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '设置成功'
					})
					this.distributor_royalty = value
					this.$refs.Commission.close()
				})
			},
			set(user_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/staff/add-staff?type='+this.staffType+'&user_id='+user_id
				})
			},
			changeCommission(data){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/staff/add-staff?type='+this.staffType+'&user_id='+data.user_id+'&royalty='+data.royalty+'&store_admin_id='+data.store_admin_id
				})
			}
		}
	}
</script>

<style lang="scss">
	.staff{
		padding-bottom: 110rpx;
		&.pd0{
			padding-bottom: 0;
		}
		&.manage{
			padding-bottom: 198rpx;
		}
		.staff-search{
			background-color: #FFF;
			padding: 15rpx 20rpx;
			.staff-search-box{
				height: 78rpx;
				background-color: #F3F3F3;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				.picker{
					padding: 0 20rpx;
					font-size: 26rpx;
					display: flex;
					align-items: center;
					border-right: solid 1px #B6B6B6;
					margin-right: 20rpx;
					&::after{
						display: inline-block;
						vertical-align: middle;
						content: '';
						width: 0;
						height: 0;
						border-left: 12rpx solid transparent;
						border-right: 12rpx solid transparent;
						border-top: 12rpx solid #666;
						margin-left: 10rpx;
					}
				}
				input{
					flex: 1;
					font-size: 26rpx;
				}
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
					margin-top: -5rpx;
				}
				image.close{
					background-color: #BBB;
					border-radius: 50%;
				}
			}
		}
		.staff-type{
			display: flex;
			align-items: center;
			background-color: #FFF;
			border-top: solid 1px #EEE;
			.staff-search-item{
				flex: 1;
				text-align: center;
				padding: 30rpx 0;
				position: relative;
				view{
					color: #999;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
				text{
					font-size: 28rpx;
					color: #999;
				}
				&.active{
					&::after{
						content: '';
						position: absolute;
						bottom: 10rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 60rpx;
						height: 6rpx;
						border-radius: 6rpx;
						background-color: #2073F5;
					}
					view{
						font-size: 34rpx;
						color: #333;
					}
					text{
						font-size: 30rpx;
						color: #333;
					}
				}
			}
		}
		.staff-list{
			margin-top: 20rpx;
			.staff-item{
				border-bottom: solid 1px #EEE;
				background-color: #FFF;
				padding: 35rpx 20rpx;
				label{
					display: flex;
					align-items: center;
					image{
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						background-color: #EEE;
					}
					.staff-item-info{
						flex: 1;
						margin: 0 25rpx;
						.staff-item-name{
							font-size: 30rpx;
						}
						.staff-item-id{
							font-size: 22rpx;
							color: #999;
							margin: 10rpx 0;
							text{
								margin-left: 20rpx;
								color: #2073F5;
							}
						}
						.staff-item-tag{
							display: inline-block;
							height: 32rpx;
							line-height: 32rpx;
							font-size: 20rpx;
						}
					}
					.phonecall{
						// height: 50rpx;
						line-height: 50rpx;
						border: solid 1px #2073F5;
						color: #2073F5;
						padding: 0 25rpx;
						font-size: 24rpx;
						border-radius: 30rpx;
						text-align: center;
						&.changeCommission{
							color: #FFF;
							background-color: #2073F5;
							margin-top: 20rpx;
						}
					}
					.set{
						height: 50rpx;
						line-height: 50rpx;
						border: solid 1px #141414;
						color: #141414;
						padding: 0 25rpx;
						font-size: 24rpx;
						border-radius: 30rpx;
						text-align: center;
						margin-top: 20rpx;
					}
				}
			}
		}
		.all-chose{
			position: fixed;
			height: 88rpx;
			bottom: 100rpx;
			left: 0;
			right: 0;
			padding: 20rpx;
			background-color: #FFF;
			border-bottom: solid 2rpx #EEE;
			label{
				display: flex;
				align-items: center;
			}
		}
		.staff-bottom{
			position: fixed;
			display: flex;
			height: 100rpx;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FFF;
			align-items: center;
			view{
				flex: 1;
				font-size: 34rpx;
				text-align: center;
				line-height: 100rpx;
				&.add-btn{
					color: #FFF;
					background-color: #2073F5;
				}
				&.del{
					color: #F12D2D;
				}
				&.orange{
					color: #FE9B26;
				}
			}
		}
		.tips{
			padding: 0 30rpx;
			font-size: 24rpx;
			color: #999;
			padding: 20rpx;
			background-color: #FFF;
			border-top: solid 2rpx #efefef;
			color: red;
		}
		.group{
			display: inline-block;
			margin: 20rpx 20rpx 0;
			font-size: 24rpx;
			line-height: 60rpx;
			border-radius: 8rpx;
			border: solid 2rpx #EEE;
			background-color: #FFF;
			padding: 0 20rpx;
		}
	}
</style>